<template>
	<view>
		<view class="cu-form-group" v-if="mode == 'input'">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<input :style="errorTip?'border:1px solid #e54d42;':''" type="text" :disabled="disabled" :name="path" :value="value" :maxlength="maxlength" :placeholder="placeholderTip" @blur="emitBlur($event.target.value)" @input="emitInput($event.target.value)"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'number'">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<input :style="errorTip?'border:1px solid #e54d42;':''" type="number" :disabled="disabled" :name="path" :value="value" :maxlength="maxlength" :placeholder="placeholderTip" @blur="emitBlur($event.target.value)" @input="emitInput($event.target.value)"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'idcard'">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<input :style="errorTip?'border:1px solid #e54d42;':''" type="idcard" :disabled="disabled" :name="path" :value="value" :maxlength="maxlength" :placeholder="placeholderTip" @blur="emitBlur($event.target.value)" @input="emitInput($event.target.value)"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'digit'">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<input :style="errorTip?'border:1px solid #e54d42;':''" type="digit" :disabled="disabled" :name="path" :value="value" :maxlength="maxlength" :placeholder="placeholderTip" @blur="emitBlur($event.target.value)" @input="emitInput($event.target.value)"></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'date' || mode == 'time' || mode == 'datetime'" v-show="false">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<input :style="errorTip?'border:1px solid #e54d42;':''" type="text" :disabled="disabled" :name="path" :value="datetime" disabled></input>
		</view>
		<view class="cu-form-group" v-if="mode == 'date' || mode == 'time' || mode == 'datetime'">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<picker mode="date" :value="date" start="1900-01-01" end="2099-12-31" @change="dateChange" v-if="mode == 'date' || mode == 'datetime'">
				<view class="picker">
					{{date}}
				</view>
			</picker>
			<picker mode="time" :value="time" start="00:00" end="23:59" @change="timeChange" v-if="mode == 'time' || mode == 'datetime'">
				<view class="picker">
					{{time}}
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	/**
	 * 输入框组件
	 * @property {String} value 传入默认值
	 * @property {String} mode 类型默认input 可传入number数字键盘 idcard身份证号码 digit带小数的数字键盘 
	 * date日期型 time时间型 datetime日期时间型号
	 * @property {String} labelName 标签名称
	 * @property {String} path 绑定的name值
	 * @property {String} placeholder 提示内容
	 * @property {Boolean} required 是否必填
	 * @property {Number} maxlength 最大长度
	 * @property {Boolean} disabled 是否只读
	 * @property {Boolean} currentTime 是否取当前时间默认是
	 * @event @input 输入事件
	 * @event @blur 失去焦点事件
	 * @event @change 日期选择事件
	 * @example <js-input labelName='单行文本' path='testInput' :value='main.testInput' maxlength="200"></js-input>
	 */
	import moment from 'moment'
	export default {
		name: 'js-input',
		behaviors: ['uni://form-field-group'],
		data() {
			return {
				time: moment().format("HH:mm"),
				date: moment().format("YYYY-MM-DD"),
				errorTip: false,
			}
		},
		computed: {
			datetime() {
				if (this.mode == 'date') {
					if(this.date == "请选择") {
						return ""
					}
					return this.date
				} else if (this.mode == 'time') {
					if(this.time == "请选择") {
						return ""
					}
					return this.time
				} else if (this.mode == 'datetime') {
					if(this.date == "请选择") {
						return ""
					}
					if(this.time == "请选择") {
						return ""
					}
					return this.date + ' ' + this.time
				}
			},
			placeholderTip(){
				return this.disabled ? '' : this.placeholder
			}
		},
		mounted() {
			this.init()
		},
		props: {
			// datetime date time input textarea number digit idcard
			mode: {
				type: String,
				default: 'input'
			},
			labelName: {
				type: String,
				default: ''
			},
			path: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请输入相关内容'
			},
			required:{
				type: Boolean,
				default: false
			},
			maxlength:{
				type:Number,
				default:-1
			},
			disabled:{
				type: Boolean,
				default: false
			},
			currentTime:{
				type: Boolean,
				default: true
			}
		},
		methods: {
			init: function() {
				if (this.mode == 'date' && this.value) {
					this.date = moment(this.value).format("YYYY-MM-DD")
				}
				if (this.mode == 'time' && this.value) {
					this.time = moment(this.value).format("HH:mm")
				}
				if (this.mode == 'datetime' && this.value) {
					this.date = moment(this.value).format("YYYY-MM-DD")
					this.time = moment(this.value).format("HH:mm")
				}
				if(!this.currentTime && this.value == "") {
					this.date = "请选择"
					this.time = "请选择"
				}
			},
			dateChange: function(e) {
				this.date = e.target.value
				this.$emit("change",  this.datetime)
			},
			timeChange: function(e) {
				this.time = e.target.value
				this.$emit("change",  this.datetime)
			},
			emitBlur: function(value){
				this.$emit("blur",  value)
				if(this.required && !this.disabled){
					if(value.length == 0){
						this.errorTip = true;
						uni.showToast({
							icon: 'none',
							title: this.labelName + '不能为空'
						})
					}
				}
			},
			emitInput: function(value){
				this.errorTip = false;
				this.$emit("input",  value)
			}
		},
		watch: {
			mode(val, oldVal) {
				this.init();
			},
			labelName(val, oldVal) {
				this.init();
			},
			path(val, oldVal) {
				this.init();
			},
			value(val, oldVal) {
				this.init();
			},
			placeholder(val, oldVal) {
				this.init();
			}
		}
	}
</script>

<style>
	.cu-form-group {
		border-top: null;
		border-bottom: 1rpx solid #eee;
	}
</style>
